<template>
  <div role="tabpanel" class="tab-pane active" id="Message">
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <router-link
        :to="{
          name: 'MsgDetail',
          params: {
            msgId: item.id
          },
          query: {
            content: item.content
          }
        }"
        >
          {{ item.content }}
        </router-link>
      </li>
      
    </ul>
    <div class="alert alert-success" role="alert">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';


const list = ref([
  { id: 10010, content: '王宝强' },
  { id: 10020, content: '朱一龙' },
  { id: 10030, content: '李白' },
])
</script>

<style scoped></style>
